<script setup lang="ts">
import { inject, computed, nextTick } from 'vue';
import { useData } from 'vitepress';

const { isDark, theme } = useData();

const switchTitle = computed(() => {
  return isDark.value ? theme.value.lightModeSwitchTitle || '切换到明亮主题' : theme.value.darkModeSwitchTitle || '切换到暗黑主题';
});

const toggleAppearance = inject('toggle-appearance', () => {
  isDark.value = !isDark.value;
});

// https://vitepress.dev/zh/guide/extending-default-theme
// const demo = async function ({ clientX: x, clientY: y }: MouseEvent) {
//   const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`];
//   await document?.startViewTransition(async () => {
//     isDark.value = !isDark.value;
//     await nextTick();
//   }).ready;
//   document.documentElement.animate(
//     { clipPath: isDark.value ? clipPath.reverse() : clipPath },
//     {
//       duration: 300,
//       easing: 'ease-in',
//       pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
//     }
//   );
// };
</script>
<template>
  <div class="theme-switch" :title="switchTitle">
    <t-switch v-model="isDark" size="large" :label="['🌙', '🌞']" @onChange="toggleAppearance"></t-switch>
  </div>
</template>

<style scoped>
.theme-switch {
  cursor: pointer;
  user-select: none;
  transform: none !important;
}
</style>
